<template>
  <div id="memberactivity">
    <swiper class="memberactivity" loop auto height="150px" dots-position="center" :list="demo06_list" :index="demo06_index" @on-index-change="demo06_onIndexChange"></swiper>
    <div class="act-content">
      <div class="myActivity">
        <div class="top">
          <span class="actTitle">我的活动</span>
          <a href="javascript:;" class="checked" @click="routeToMyActivity('myactivity')">查看></a href="javascript:;">
          <!-- <span class="checked">查看></span> -->
        </div>
        <div class="bottom" @click="routeToMyActivity('myactivity')">
          <span class="icon"></span><span class="txt">你一共参加了{{count}}个活动</span>
        </div>
      </div>
      <h1></h1>
      <div class="niju-day">
        <div class="top">
          <span class="actTitle">宁聚日</span>
          <span v-if="isShow1" class="checked" @click="routeTo1('3')">更多></span>
        </div>
        <div class="activity-list">
          <!-- <panel  :list="list" :type="type"></panel> -->
          <ul>
            <li v-for="(item, id, type) in data2" :id="id=item.id" :type="type = item.type" @click="routeToActivitydetails((name = item.activityTitle), type, id, (url = item.url))">
              <a href="javascript:;">
                <div class="pic"><img :src="item.activityImg"></div>
                <div class="right">
                  <p class="txt"><span class="title1">{{item.activityTitle}}</span><span class="status">{{item.status}}</span></p>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <h1></h1>
      <div class="interaction">
        <div class="top">
          <span class="actTitle">互动活动</span>
          <span v-if="isShow2" class="checked" @click="routeTo1('1')">更多></span>
        </div>
        <div class="activity-list">
          <!-- <panel  :list="list" :type="type"></panel> -->
          <ul>
            <li v-for="(item, id, type) in data3" :id="id=item.id" :type="type = item.type" @click="routeToActivitydetails((name = item.activityTitle), type, id, (url = item.url))">
              <div class="pic">
                <img v-if="item.activityImg === undefined" src="../../assets/images/vote-pic.png">
                <img v-else-if="item.activityImg !== undefined" :src="item.activityImg">
              </div>
              <div class="right">
                <p><span class="title1">{{item.activityTitle}}</span><span class="status">{{item.status}}</span></p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <h1></h1>
      <div class="pastAct">
        <div class="top">
          <span class="actTitle">往期活动</span>
          <span v-if="isShow3" class="checked" @click="routeTo1('2')">更多></span>
        </div>
        <div class=" activity-list">
          <!-- <panel  :list="list" :type="type"></panel> -->
          <ul>
            <li v-for="(item, id, type) in data4" :id="id=item.id" :type="type = item.type" @click="routeToActivitydetails1((name = item.activityTitle), type, id, (url = item.url))">
              <div class="pic">
                <img v-if="item.activityImg === undefined" src="../../assets/images/vote-pic.png">
                <img v-else-if="item.activityImg !== undefined" :src="item.activityImg">
              </div>
              <div class="right">
                <p><span class="title1">{{item.activityTitle}}</span><span class="status">{{item.status}}</span></p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { Swiper } from 'vux'
  // const baseList = [{
  //   headPortrait: 'http://m.baidu.com',
  //   img: 'https://static.vux.li/demo/1.jpg'
  // }, {
  //   headPortrait: 'javascript:',
  //   img: 'https://static.vux.li/demo/2.jpg'
  // }, {
  //   headPortrait: 'javascript:',
  //   img: 'https://static.vux.li/demo/3.jpg'
  // }]
  // const headPortraitList = baseList.map((item, index) => ({
  //   headPortrait: 'http://m.baidu.com',
  //   img: item.img
  // }))

  export default {
    name: 'memberactivity',
    components: {
      Swiper
    },
    data () {
      return {
        isShow1: false,
        isShow2: false,
        isShow3: false,
        count: 0,
        data2: [],
        data3: [],
        data4: [],
        demo06_list: [],
        demo06_index: 0,
        swiperItemIndex: 1
      }
    },
    created () {
      this.queryCarouselInfoImg()
      this.getActivity()
    },
    methods: {
      routeTo1 (type) {
        this.routeto('activitylist', { type: type })
      },
      routeToMyActivity (name) {
        window.zhuge.track('Click', {
          '事件名称': '会员中心-会员活动-我的活动-点击',
          '访问时间': new Date().toLocaleString(),
          'OpenID': this.getCookie('openid')
        }, () => {
          this.routeto(name)
        })
      },
      routeToActivitydetails (name, type, id, url) {
        if (type === 1) {
          window.zhuge.track('Click', {
            '事件名称': '会员中心-会员活动-互动活动-点击',
            '访问时间': new Date().toLocaleString(),
            'OpenID': this.getCookie('openid'),
            '活动名称': name
          }, () => {
            this.routeto('activitydetails', { id: id })
          })
        }
        if (type === 2) {
          window.zhuge.track('Click', {
            '事件名称': '会员中心-会员活动-互动活动-点击',
            '访问时间': new Date().toLocaleString(),
            'OpenID': this.getCookie('openid'),
            '活动名称': name
          }, () => {
            this.routeto('vote', { id: id })
          })
        }
        if (type === 3) {
          window.zhuge.track('Click', {
            '事件名称': '会员中心-会员活动-宁聚日-点击',
            '访问时间': new Date().toLocaleString(),
            'OpenID': this.getCookie('openid'),
            '活动名称': name
          }, () => {
            window.location.href = url
          })
        }
      },
      routeToActivitydetails1 (name, type, id, url) {
        if (type === 1) {
          window.zhuge.track('Click', {
            '事件名称': '会员中心-会员活动-往期活动-点击',
            '访问时间': new Date().toLocaleString(),
            'OpenID': this.getCookie('openid'),
            '活动名称': name
          }, () => {
            this.routeto('activitydetails', { id: id })
          })
        }
        if (type === 2) {
          window.zhuge.track('Click', {
            '事件名称': '会员中心-会员活动-往期活动-点击',
            '访问时间': new Date().toLocaleString(),
            'OpenID': this.getCookie('openid'),
            '活动名称': name
          }, () => {
            this.routeto('vote', { id: id })
          })
        }
        if (type === 3) {
          window.zhuge.track('Click', {
            '事件名称': '会员中心-会员活动-宁聚日-点击',
            '访问时间': new Date().toLocaleString(),
            'OpenID': this.getCookie('openid'),
            '活动名称': name
          }, () => {
            window.location.href = url
          })
        }
      },
      demo06_onIndexChange (index) {
        this.demo06_index = index
      },
      // 轮播图
      queryCarouselInfoImg () {
        // 活动列表
        this.$axios.post(this.apidomain + '/api/activity/getActivityCarouselList/' + this.getCookie('appid'))
        .then((response) => {
          if (response.data.errorCode === '0') {
            this.demo06_list = response.data.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
      },
      getActivity () {
        // 凝聚日活动
        this.$axios.post(this.apidomain + '/api/activity/getNingActivityList/' + this.getCookie('appid'), {
          pageIndex: '0'
        })
        .then((response) => {
          if (response.data.errorCode === '0') {
            this.data2 = response.data.data
            if (response.data.data.length >= 2) {
              this.isShow1 = true
              this.data2.length = 2
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
        // 互动活动
        this.$axios.post(this.apidomain + '/api/activity/getVoteAndApplyList/' + this.getCookie('appid'), {
          pageIndex: '0'
        })
        .then((response) => {
          this.data3 = response.data.data
          if (this.data3.length >= 2) {
            this.isShow2 = true
            this.data3.length = 2
          }
        })
        .catch((error) => {
          console.log(error)
        })
        // 往期活动
        this.$axios.post(this.apidomain + '/api/activity/getExpireActivityList/' + this.getCookie('appid'), {
          pageIndex: '0'
        })
        .then((response) => {
          if (response.data.errorCode === '0') {
            this.data4 = response.data.data
            // console.log(response.data.data)
            if (this.data4.length >= 2) {
              this.isShow3 = true
              this.data4.length = 2
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
        // 我的活动
        this.$axios.post(this.apidomain + '/api/activity/getMyActivityList/' + this.getCookie('appid'), {
          openId: this.getCookie('openid'),
          pageIndex: '0'
        })
        .then((response) => {
          if (response.data.errorCode === '0') {
            this.count = response.data.data.activityNum
          }
        })
        .catch((error) => {
          console.log(error)
        })
      }
    }
  }
</script>
<style lang="less">
  @import "../../assets/less/memberactivity/memberactivity.less";
</style>
